/**
在 React 中，子组件向父组件传递数据的过程通常是通过回调函数来实现的。
  1. 父组件定义回调函数
  - 在父组件中定义一个方法，用于接收子组件传来的数据。
  - 将这个方法作为 props 传递给子组件。
  jsx
  // 父组件
  class Parent extends React.Component {
    handleDataFromChild = (data) => {
      console.log('Data from child:', data);
    };

    render() {
      return <Child sendData={this.handleDataFromChild} />;
    }
  }

  // 子组件
  const Child = (props) => {
    const handleClick = () => {
      props.sendData('Hello from Child!');
    };

    return <button onClick={handleClick}>Send Data to Parent</button>;
  };
  2. 子组件调用父组件的回调函数

  - 在子组件中，当需要将数据传递给父组件时，调用通过 props 接收到的回调函数，并传入数据。

  3. 注意事项
  - 单向数据流：数据在 React 中是单向流动的，子组件不能直接修改父组件的状态，而是通过回调函数将数据传递给父组件。
  - 状态提升：如果多个子组件需要共享同一状态，可以将状态提升到它们的共同父组件中，以便通过回调函数进行通信。
  - 解耦合：通过回调函数的方式，可以使父子组件之间的耦合度降低，提高组件的复用性。

  4. 总结
  子组件通过调用父组件传递的回调函数，将数据传递给父组件，是 React 组件之间通信的重要方式。这种方法保持了数据流的单向性，使得组件之间的关系更加清晰，便于管理和维护。
 */
import React, { Component } from 'react'
import AddCounter from './c-cpns/AddCounter'
import SubCounter from './c-cpns/SubCounter'

export default class App extends Component {
  constructor() {
    super()

    this.state = {
      counter: 0
    }
  }

  changeCounter(count) {
    this.setState({
      counter: this.state.counter + count
    })
  }
  
  render() {
    const { counter } = this.state
    
    return (
      <div>
        <h3>当前计数: {counter}</h3>
        <AddCounter addClick={(count) => this.changeCounter(count)}/>
        <SubCounter subClick={(count) => this.changeCounter(count)}/>
      </div>
    )
  }
}
